// DOM元素生命周期演示

// 创建一个元素
const div = document.createElement("div");
div.id = "test-player";
console.log("1. 创建元素后:");
console.log("   元素存在:", !!div); // true
console.log("   有父节点:", !!div.parentNode); // false

// 添加到DOM
document.body.appendChild(div);
console.log("2. 添加到DOM后:");
console.log("   元素存在:", !!div); // true
console.log("   有父节点:", !!div.parentNode); // true

// 从DOM中移除
div.remove();
console.log("3. 从DOM移除后:");
console.log("   元素存在:", !!div); // true - 引用仍然存在！
console.log("   有父节点:", !!div.parentNode); // false - 但已脱离DOM树

// 在Storybook热重载时的典型情况：
// React组件被销毁 → DOM被清理 → 但ref引用仍指向旧元素
// 如果只检查 playerRef.current，会认为元素可用
// 但实际上它已经不在DOM树中了，无法用于创建播放器

// 因此需要双重检查：
function isElementUsable(element) {
  return !!(element && element.parentNode);
}

// 这就是为什么我们需要：
// if (!playerRef.current || !playerRef.current.parentNode) {
//   // 元素不可用
// }
